<!--开卡员端开卡-->
<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">领卡员端</el-breadcrumb-item>
    <el-breadcrumb-item>批量生卡</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="card">
    <el-form class="card_container" :model="addForm" ref="addRef" :rules="rules">
      <el-form-item prop="generateType">
        <span>请选择会员卡类型</span>
        <el-select v-model="addForm.generateType" class="m-2" style="width: 70%" placeholder="点击选择">
          <el-option
              v-for="item in cardCat"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="buildQuantity">
        <span>请输入开卡数量 &nbsp;</span>
        <el-input v-model="addForm.buildQuantity"></el-input>
      </el-form-item>
    </el-form>
    <div class="card_button">
      <el-button @click="reConfirm">确&nbsp;&nbsp;&nbsp;&nbsp;认</el-button>
    </div>
  </div>
  <!--  <div>-->
  <!--    <el-button @click="go">go</el-button>-->
  <!--  </div>-->
</template>

<script setup>
import {getCurrentInstance, reactive, ref} from "vue";
const { proxy } = getCurrentInstance()
const addForm = reactive({
  generateType: '',
  buildQuantity: '',
  total: 4
})
const rules = reactive({
  generateType: [
    {
      required: true,
      message: '请选择会员卡类型',
      trigger: 'blur'
    }
  ],
  buildQuantity: [
    {
      required: true,
      message: '请输入开卡数量',
      trigger: 'blur'
    }
  ]
})
const cardCat = [
  {label: '蔬菜礼品月卡A', value: '蔬菜礼品月卡A'},
  {label: '荤素礼品月卡B', value: '荤素礼品月卡B'},
  {label: '蔬菜礼品年卡A', value: '蔬菜礼品年卡A'},
  {label: '荤素礼品年卡B', value: '荤素礼品年卡B'},
  {label: '尊贵VIP会员卡', value: '尊贵VIP会员卡'},
  {label: '至尊VIP会员卡', value: '至尊VIP会员卡'},
  {label: '两无化蔬菜单次卡A', value: '两无化蔬菜单次卡A'},
  {label: '两无化蔬菜单次卡B', value: '两无化蔬菜单次卡B'},
  {label: '20斤大米提货卡', value: '20斤大米提货卡'},
  {label: '10斤大米礼盒装兑换卡', value: '10斤大米礼盒装兑换卡'},
  {label: '电信劳模尊享套餐卡', value: '电信劳模尊享套餐卡'},
   {label: '蔬菜月卡A', value: '蔬菜月卡A'},
   {label: '单次卡A', value: '单次卡A'},
   {label: '荤素月卡B', value: '荤素月卡B'},
   {label: '荤素年卡B', value: '荤素年卡B'},
    {label: '蔬菜年卡A', value: '蔬菜年卡A'},
]
const addRef = ref('')

// 重置表单
const rstForm = () => {
  addRef.value.resetFields()
}

// 激活卡提示
const reConfirm = async () => {
  addRef.value.validate(async valid => {
    if (!valid) return proxy.$message.error('验证错误开卡失败')
    else {
      return proxy.$messageBox.confirm(
          `你是否要开通${addForm.buildQuantity}张卡类型为${addForm.generateType}进行开通操作`,
          '提示',
          {
            confirmButtonText: '确认开卡',
            cancelButtonText: '取消开卡',
            type: 'warning',
          }
      )
          .then(async () => {
            // 开卡操作请求
            if (addForm.generateType === '蔬菜礼品月卡A') { addForm.total = 4; addForm.hard = 10 }
            if (addForm.generateType === '荤素礼品月卡B') { addForm.total = 4; addForm.hard = 21 }
            if (addForm.generateType === '蔬菜礼品年卡A') { addForm.total = 48; addForm.hard = 22 }
            if (addForm.generateType === '荤素礼品年卡B') { addForm.total = 48; addForm.hard = 23 }
            if (addForm.generateType === '尊贵VIP会员卡') { addForm.total = 48; addForm.hard = 29 }
            if (addForm.generateType === '至尊VIP会员卡') { addForm.total = 96; addForm.hard = 60 }
            if (addForm.generateType === '两无化蔬菜单次卡A') { addForm.total = 1; addForm.hard = 31 }
            if (addForm.generateType === '两无化蔬菜单次卡B') { addForm.total = 1; addForm.hard = 32 }
            if (addForm.generateType === '20斤大米提货卡') { addForm.total = 1; addForm.hard = 24 }
            if (addForm.generateType === '10斤大米礼盒装兑换卡') { addForm.total = 1; addForm.hard = 30 }
			 if (addForm.generateType === '电信劳模尊享套餐卡') { addForm.total = 4; addForm.hard = 25 }
			  if (addForm.generateType === '蔬菜月卡A') { addForm.total = 4; addForm.hard = 'A50' }
            if (addForm.generateType === '单次卡A') { addForm.total = 1; addForm.hard = 'A51' }
			if (addForm.generateType === '荤素月卡B') { addForm.total = 4; addForm.hard = 'B52' }
			if (addForm.generateType === '蔬菜年卡A') { addForm.total = 4; addForm.hard = 'A53' }
			if (addForm.generateType === '荤素年卡B') { addForm.total = 4; addForm.hard = 'B54' }
			const {data: res} = await proxy.$http.CardService.activeCard(addForm)
            if (res.code !== 200) {
              rstForm()
              return proxy.$message({
                type: 'error',
                message: res.msg,
              })
            }
            rstForm()
            proxy.$message({
              type: 'success',
              message: '开卡成功',
            })
          })
          .catch(() => {
            proxy.$message({
              type: 'info',
              message: '取消开卡',
            })
          })
    }
  })

}
</script>

<style scoped lang="scss">
.card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90%;
}
.el-breadcrumb{
  height: 10%;
}
.card_container {
  width: 70%;
  box-sizing: border-box;
  min-width: 500px;
  background-color: rgb(57,62,74);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: 0.1rem;
  .el-form-item {
    margin-top: 0.2rem;
    span{
      font-size: 0.3rem;
      color: white;
      text-align: center;
      width: 100%;
      margin-bottom: 20px;
      box-sizing: border-box;
    }
    .el-input {
      width: 70%;
      height: 0.5rem;
      margin-left: 15%;
    }
  }
}
.card_button {
  width: 30%;
  height: 60px;
  margin-top: 1rem;
  display: flex;
  .el-button {
    width: 100%;
    height: 100%;
    background-color: rgb(0,152,131);
    color: white;
    font-weight: bolder;
    font-size: 0.3rem;
  }
}

:deep(.card_container .el-input__wrapper) {
  background-color: white;
  font-size: 0.3rem;
}
:deep(.card_container .el-input__inner) {
  //color: white;
  color: black;
}

:deep(.card_container .el-select .el-input__inner){
  height: 0.5rem;
}
.el-select{
  margin-left: 15%;
}
:deep(.card_container .el-input__inner::placeholder){
  //color: white;
}
:deep(.card_container .el-form-item__error) {
  margin-left: 15%;
}
</style>
